<template>
	<div class="container">
		<div class="warp">
			<div class="person">
				<div class="avatorimg">
					<img src="../../assets/images/avator.png" alt="">
				</div>
				<div class="p-cont">
					<p class="name">Naomi Neo</p>
					<p><img src="../../assets/images/address.png" alt=""><span class="address">Singapore, Central Singapore</span></p>
				</div>
			</div>
			<div class="icon-btn">
				<!-- <span><img src="../../assets/images/setup2.png" alt=""></span> -->
				<span><img src="../../assets/images/redshare.png" alt=""></span>
				<span>
					<button type="button" class="btn btn-danger btn-lg btn-prm" data-toggle="modal" data-target="#myModal">
						Requst a qoute
					</button>
				</span>
				<!-- [-->
				<!-- Modal -->
				<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<h4 class="modal-title" id="myModalLabel">Post Public Brief/Job</h4>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i aria-hidden="true">&times;</i></button>
							</div>
							<div class="text">
								<p style="padding: 10px 0 0 15px;">Tell the creator what you want them to do & include references.</p>
							</div>
							<div class="modal-body">
								<form accept-charset="UTF-8">
									<div class="form-group">
										<label for="products">产品</label>
										<input type="text" class="form-control" id="products" placeholder="Client Name - Project Name - Date">
									</div>
									<!--  -->
									<div class="form-group">
										<label for="tuiguang">推广目标</label>
										<select name="industy" class="form-control" id="tuiguang">
											<option>直播带货</option>
										</select>
									</div>

									<!-- 发布平台 -->
									<p>发布平台</p>
									<div class="platform d-flex">
										<div>
											<div class="form-group">
												<div class="form-check form-check-inline">
													<input class="form-check-input" type="checkbox" style="zoom: 180%;" id="inlineCheckbox1" value="option1">
													<label class="form-check-label" for="inlineCheckbox1">
														Tik Tok
													</label>
												</div>
											</div>
											<div class="form-group">
												<div class="form-check form-check-inline">
													<input class="form-check-input" type="checkbox" style="zoom: 180%;" id="inlineCheckbox1" value="option1">
													<label class="form-check-label" for="inlineCheckbox1">
														Facebook
													</label>
												</div>
											</div>
										</div>
										<!--  -->
										<div class="platform-right">
											<div class="form-group">
												<div class="form-check form-check-inline">
													<input class="form-check-input" type="checkbox" style="zoom: 180%;" id="inlineCheckbox1" value="option1">
													<label class="form-check-label" for="inlineCheckbox1">
														Google
													</label>
												</div>
											</div>
											<div class="form-group">
												<div class="form-check form-check-inline">
													<input class="form-check-input" type="checkbox" style="zoom: 180%;" id="inlineCheckbox1" value="option1">
													<label class="form-check-label" for="inlineCheckbox1">
														Pinteret
													</label>
												</div>
											</div>
										</div>
										<!--  -->
									</div>
									<!-- 发布平台 end -->
									<!-- 预算计价 -->
									<div class="d-flex justify-content-between from-item-hope">
										<div class="form-group">
											<label for="yusuan">预算计价</label>
											<input type="text" class="form-control" id="yusuan">
										</div>
										<div class="form-group">
											<label for="fujia">附加出价</label>
											<input type="text" class="form-control" id="fujia">
										</div>
									</div>
									<!-- 预算计价 end -->

									<!-- 是否需要版权-->
									<div class="d-flex justify-content-between from-item-hope">
										<div class="form-group">
											<label for="tv-copyright">是否需要视频版权</label>
											<select name="industy" class="form-control" id="tv-copyright">
												<option>否</option>
												<option>是</option>
											</select>
										</div>
										<div class="form-group">
											<label for="h-date">期望交期</label>
											<select name="industy" class="form-control" id="h-date">
												<option>付款后10天</option>
												<option>付款后5天</option>
											</select>
										</div>
									</div>
									<!-- KOl end -->
									<div class="form-group" style="width: 45%;">
										<label for="t-style">推广形式</label>
										<select name="industy" class="form-control" id="t-style">
											<option>付款后10天</option>
											<option>付款后5天</option>
										</select>
									</div>
									<!--  -->
								</form>
							</div>
							<div class="modal-footer">
								<div class="add-avator">
									<img src="../../assets/images/redadd.png" alt="">
									<img src="../../assets/images/avator1.png" alt="">
									<img src="../../assets/images/avator2.png" alt="">
								</div>
								<button type="button" class="btn btn-danger">Save changes</button>
							</div>
						</div>
					</div>
				</div>
				<!-- model end -->
				<!-- ] -->

			</div>
		</div>
	</div>

</template>

<script>
	export default {}
</script>

<style lang="scss" scoped="scoped">
	@media screen and (max-width:750px) {
		.icon-btn {
			display: none;
		}
	}

	.container {}

	.modal-content input,
	.modal-content select {
		font-size: 14px;
	}

	.warp {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		position: relative;
		height: 122px;
		width: 100%;
		// margin-bottom: 200px;
	}

	.person .p-cont {
		padding: 10px;
		position: absolute;
		left: 150px;
		top: 0;

		.name {
			font-weight: bold;
			font-size: 24px;
		}

		span {
			vertical-align: middle;
			padding-left: 10px;
		}

		img {
			display: inline-block;
			height: 13.461px;
			width: 12.071px;
		}
	}

	.person .avatorimg {
		width: 150px;
		height: 150px;
		background-color: #fff;
		border-radius: 50%;
		position: absolute;
		left: 0;
		top: -20px;
		display: flex;
		align-items: center;
		justify-content: center;

		img {
			display: block;
			height: 139.422px;
			width: 139.422px;
		}
	}

	.person::after {
		content: '';
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}

	.icon-btn span {
		margin-left: 10px;
	}
	
	.icon-btn span img{
		display: inline-block;
		height: 18px;
	}

	.btn-danger {
		background-color: #F15D46;
		outline: none;
		border: none;
		font-size: 17.55px;
	}

	.btn-danger::hover {
		color: none;
	}

	.icon-btn span:nth-of-type(1) {
		display: inline-block;
		background-color: #F4F4F4;
		height: 42px;
		width: 42px;
		border-radius: 4px;
		text-align: center;
		line-height: 42px;
	}

	.from-item-hope .form-group {
		width: 45%;
	}

	.platform {
		padding-top: 10px;
		div {
			width: 100%;
		}
		.platform-right{
			padding-left: 30px;
		}
	}
	

	.add-avator {
		position: relative;
		margin-top: -25px;

		img {
			display: inline-block;
			position: absolute;
			top: 0;
		}

		img:nth-of-type(1) {
			left: 0px;
			z-index: 3;
		}

		img:nth-of-type(2) {
			left: 25px;
			z-index: 2;
		}

		img:nth-of-type(3) {
			left: 50px;
		}
	}

	.modal-footer {
		justify-content: space-between;
		padding: 20px 10px;
	}
</style>
